<script setup>
   // 调用list方法获取服务器待提货单数据
    //  1. 导入 apis/task.js
    import taskApi from '@/apis/task.js'
    import { onMounted, ref } from 'vue'
    // 2. 在生命周期方法 onMouted中来请求服务器数据
    const list = ref([])
    let page = 1
    const isTriggered = ref(false)
    onMounted(async () => {
      let res = await taskApi.list()
      // 3. 定义响应式数据来接收服务器的数组并渲染到页面上
      list.value = res.data.data.items
    })
    // 上拉触底
     async function onScrollToLower() {
       page++ //增加页面
       //将新的页码对应的数据加载回来
       let res = await taskApi.list(1,page,10)
       //判断如果没有数据，则不追加，否则追加
       if(res.data.data.items) {
          // 使用数组的push方法，将服务器最新的数据追加到页面的最下方
          list.value.push(...res.data.data.items)
          console.log('已经触底',page)
       }
     }

</script>

<template>
  <scroll-view
  scroll-y

  class="scroll-view"
  @scrolltolower="onScrollToLower"
   refresher-enabled


   >
    <view class="scroll-view-wrapper">
      <view class="task-card" v-for="item in list" :key="item.id">
        <navigator
        hover-class="none"
        :url="'/subpkg_task/detail1/index?id=' + item.id"
        >
          <view class="header">
            <text class="no">任务编号:{{item.transportTaskId}}</text>
            <!-- <text class="status">已延迟</text> -->
          </view>
          <view class="body">
            <view class="timeline">
              <view class="line"
                >{{item.startAddress}}</view
              >
              <view class="line">{{item.endAddress}}</view>
            </view>
          </view>
        </navigator>
        <view class="footer">
          <view class="label">提货时间</view>
          <view class="time">{{item.planDepartureTime}}</view>
          <navigator
            hover-class="none"
            :url="'/subpkg_task/pickup/index?id=' + item.id"
            class="action"
            >提货</navigator
          >
        </view>
      </view>

      <view v-if="false" class="task-blank">无待提货物</view>
    </view>
  </scroll-view>
</template>

<style lang="scss" scoped>
  @import './styles.scss';
</style>
